<template>
  <div>
    <div class="comment_item">
    <!-- 评论输入框 -->
    <comment-input placeholderText='撰写评论' @getText='getInputText'>
      <span slot='but' @click='publish'>发布</span>
    </comment-input>
    <!-- 登录入口 -->
    <p>请登录后发表您的评论:点击&nbsp;<a href="#" @click="clickPraise">登录/注册</a></p>
    <!-- 评论展示区 -->
    <div class='comment_show'>
      <p>评论</p>
      <ul>
        <!-- 主要评论 -->
        <li v-for='(mainItem,mainIndex) in data' :key='mainItem.id'>
          <div class='main_comment'>
            <div class='head_img'>
              <span></span>
            </div>
            <div class='main_comment_content'>
              <p class='main_comment_info'>{{mainItem.username}}&nbsp;<span>{{mainItem.create_time}}</span></p>
              <p class='main_comment_text'>{{mainItem.content}}</p>
              <p class='main_comment_reply' v-if="!(mainIndex === butShow)"><span @click='clickReply(mainIndex)'>回复</span></p>
              <comment-input placeholderText='撰写回复' v-else>
                <span slot='but' @click='submitReply'>回复</span>
              </comment-input>
            </div>
          </div>
          <!-- 回复评论 -->
          <ul class='reply_comment' v-if='mainItem.reply.length'>
            <li v-for='(replyItem,replyIndex) in mainItem.reply' :key='replyItem.id'>
              <div class='main_comment'>
                <div class='head_img'>
                  <span></span>
                </div>
                <div class='main_comment_content'>
                  <p class='main_comment_info'>{{replyItem.username}}&nbsp;<span>{{replyItem.create_time}}</span></p>
                  <p class='main_comment_text'>回复<span class='reply_person'>{{mainItem.username}}</span>：{{replyItem.content}}</p>
                  <p class='main_comment_reply' v-if='!(replyInputShow === replyIndex)'><span @click='butReply(replyIndex)'>回复</span></p>
                  <comment-input placeholderText='撰写回复' v-else>
                      <span slot='but' @click='hiddenInput'>回复</span>
                  </comment-input>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  </div>

</template>

<script>

 import commentInput from './commentInput'

 import {mapState} from 'vuex'

export default {
  name: 'comment',
  // 详情页传过来的数据
  props: ['data'],
  data() {
      return {
        // heartShow: true,
        showLgoin: false,
        butShow: null,
        replyInputShow: null,
      }
    },
    components: {
      commentInput
    },
    computed:{
      // 获取评论内容
      ...mapState(['inputText'])
    },
    methods: {
      // 点赞
      clickPraise() {
       this.$emit('openLogin')
      },
      // 提交评论
      publish() {
        console.log(this.inputText);
        // this.$emit('emptyInput')
      },
      // 点击回复主评论
      clickReply(mainIndex) {
        this.butShow = mainIndex;
      },
      // 提交回复
      submitReply() {
        console.log(this.inputText);
        this.butShow = false;
      },
      // 显示回复框
      butReply(replyIndex) {
        this.replyInputShow = replyIndex;
      },
      // 隐藏输入框
      hiddenInput() {
        this.replyInputShow = false;
      },
      // 获取输入框内容
      getInputText(text) {
        console.log(text)
      }
    }
}
</script>

<style scoped>
.comment_item {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #2f2f2f;
  background: #fff;
}
.comment_item>p {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
}
.comment_item>p>a {
  text-decoration: none;
}
.comment_item .comment_show {
  width: 100%;
  margin-top: 30px;
}
.comment_item .comment_show>p {
  color: #777;
  font-size: 12px;
  margin-bottom: 5px;
}
.comment_item .comment_show>ul {
  width: 100%;
  border-top: 1px solid #ccc;
}
.comment_item .comment_show>ul>li {
  padding: 5px;
  margin-top: 3px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
}
.comment_item .comment_show .main_comment {
  display: flex;
}
.comment_item .comment_show .main_comment .head_img {
  width: 40px;
  position: relative;
}
.comment_item .comment_show .main_comment .head_img>span {
  width: 30px;
  height: 30px;
  background: #ccc;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}
.comment_item .comment_show .main_comment_content {
  flex: 1;
}
.comment_item .comment_show .main_comment_content .main_comment_info {
  color: #000;
  font-weight: 700;
}
.comment_item .comment_show .main_comment_content .main_comment_info>span {
  color: #666;
  font-size: 12px;
  font-weight: 500;
}
.comment_item .comment_show .main_comment_content .main_comment_text {
  width: 100%;
  font-size: 14px;
  word-wrap:break-word;
  word-break:break-all;
}
.comment_item .comment_show .main_comment_content .main_comment_reply {
  width: 100%;
  height: 20px;
  position: relative;
}
.comment_item .comment_show .main_comment_content .main_comment_reply>span {
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 0;
  color: #666;
  cursor: pointer;
}
.comment_item .comment_show .main_comment_content .main_comment_reply>span:hover {
  color: #000;
}
.comment_item .comment_show .reply_comment {
  width: 95%;
  margin-left: 5%;
  margin-top: 15px;
  padding-top: 5px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}
.reply_person {
  color: rgb(0, 110, 255);
  font-weight: 600;
}
</style>
